<template>
  <div class="m-highlight">
    <div class="light-icon"></div>
    <ul class="light-tips">
      <li>正统京都风味日餐，松阪牛料理</li>
      <li>全程优选酒店，一晚正宗温泉享受</li>
    </ul>
    <p class="light-title">"时尚东京，魅力大阪"</p>
    <div class="light-img"></div>
    <p class="light-content">在埃菲尔铁塔下的塞纳河码头边，登上装饰全透明玻璃窗的游船，用一个小时的时间欣赏两岸的极致美景。沿着塞纳河欣赏巴黎夜景中灯光璀璨的历史建筑，为您讲述璀璨巴黎的故事和法式生活。</p>
  </div>
</template>
<script>
  export default {
    name: 'm-highlight',
    data () {
      return {
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .m-highlight{
    width: 100%;
    height: 9.88rem;
    padding-top:0.41rem;
    padding-left:0.31rem;
    padding-right:0.31rem;
    margin-bottom: 0.28rem;
    border-bottom: 1px solid #D7D7D7;
    background-color: #FFF;
    position: relative;
  }
  .light-icon{
    width: 2.36rem;
    height: 0.62rem;
    position: absolute;
    left: 50%;
    margin-left: -1.18rem;
  }
  ul{
    width: 100%;
    height: 2.24rem;
    margin-top: 0.06rem;
    background-color: #FFF6F4;
    font-size: 0.28rem;
  }
  ul>li{
    padding-left: 0.74rem;
  }
  ul>li:first-child{
    padding-top: 0.34rem;
  }
  li:before{
    content: '.';
    color: rgba(255,102,51,0.50);
    font-size: 0.5rem;
  }
  .light-title{
    font-size: 0.36rem;
    text-align: center;
    color: #333;
  }
  .light-img{
    width: 92%;
    height: 42%;
    margin: 0 auto;
  }
  .light-content{
    width: 92%;
    margin: 0 auto;
    font-size: 0.28rem;
    color: #777;
  }
  @media only screen and (-webkit-min-device-pixel-ratio: 1),
  only screen and (min--moz-device-pixel-ratio: 1),
  only screen and (-o-min-device-pixel-ratio: 1/1),
  only screen and (min-device-pixel-ratio: 1){
    .light-icon{
      background-image: url("../../assets/image/group-11@2x.png");
      background-size: contain;
      background-repeat: no-repeat;
    }
    .light-img{
      background-image: url("../../assets/image/Bitmap.png");
      background-size: contain;
      background-repeat: no-repeat;
    }
  }
  @media only screen and (-webkit-min-device-pixel-ratio: 1.5),
  only screen and (min--moz-device-pixel-ratio: 1.5),
  only screen and (-o-min-device-pixel-ratio: 3/2),
  only screen and (min-device-pixel-ratio: 1.5){
    .light-icon{
      background-image: url("../../assets/image/group-11@2x@2x.png");
      background-size: contain;
      background-repeat: no-repeat;
    }
    .light-img{
      background-image: url("../../assets/image/Bitmap@2x.png");
      background-size: contain;
      background-repeat: no-repeat;
    }
  }
  @media only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (min--moz-device-pixel-ratio: 2),
  only screen and (-o-min-device-pixel-ratio: 2/1),
  only screen and (min-device-pixel-ratio: 2){
    .light-icon{
      background-image: url("../../assets/image/group-11@2x@3x.png");
      background-size: contain;
      background-repeat: no-repeat;
    }
    .light-img{
      background-image: url("../../assets/image/Bitmap@3x.png");
      background-size: contain;
      background-repeat: no-repeat;
    }
  }
</style>
